<!--  -->
<template>
  <div class='wodedingdan'>
     <van-nav-bar
      title="我的订单订单"
      left-text="返回"
      fixed
      @click-left="$router.back()"
    />
    <main class="content" ref="main" @scroll="requestmoredingdan">
        <div class="item" v-for="item in orderdingdan" :key="item.id">
            <van-cell :title="'订单ID' +item.id" is-link />
        <van-cell v-for="citem in item.orderProducts" :key="citem.id" :title="citem.name" :value="citem.count+'件'"
            :icon="citem.cover"
           
            is-link/>
        </div>
        
            
        
    </main>
  </div>
</template>

<script>
import { wodezongdingdan } from "network/api.js";
export default {
name:'',
  data () {
    return {
        orderdingdan:[],
        pape:1,
        totalPages:0,
        fale:false
    };
  },


  computed: {},


  methods: {
      async huoquzongdingdan(){
          const {data ,errcode}=await wodezongdingdan(this.pape)
          if(errcode!=0) return this.$toast("请求失败")
          console.log(data)
          
          this.orderdingdan=data.data
           this.totalPages=data.totalPages
      },
      async requestmoredingdan(){
          if(this.$refs.main.scrollHeight-this.$refs.main.scrollTop<=this.$refs.main.offsetHeight+3){
              if(this.fale) return
              this.fale=true
              this.pape++
              console.log(this.pape)
              if(this.pape<=this.totalPages){
                      const {data ,errcode}=await wodezongdingdan(this.pape)
          if(errcode!=0) return this.$toast("请求失败")
          console.log(data)
          
          this.orderdingdan=[...this.orderdingdan,...data.data]
          return this.fale=false
              }
          
          }
      }
  },
  created(){
      this.huoquzongdingdan()
  }
}

</script>
<style lang='less' scoped>
.wodedingdan{
    background: #f4f4f4;
    .content{
        height: calc(100vh - 46px);
        margin-top:46px;
        overflow-y: scroll;
        .item{
            margin:10px 0;
            .van-icon__image{
            font-size: 100px;
            }
        }
        
        
    }
}
    
</style>